<template>
	<div class="wrapper">
		<div class="content" :style="{ transform: 'rotateY(' + r + ')' }">
			<LoginForm v-model:r="r" class="login-form" />
			<Password v-model:r="r" class="login-pwd" />
		</div>
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	import LoginForm from './loginform'
	import Password from './password'
	const r = ref('0deg')
</script>

<style scoped lang="scss">
	.wrapper{
		width: 100%;
		height: 100vh;
		background-image: linear-gradient(0deg,#ffffff,#00ffff);
		display: flex;
		.content{
			width: 500px;
			height: 350px;
			background-color: #ffffff;
			margin: auto;
			border-radius: 10px;
			position: relative;
			transform-style: preserve-3d;
			transition: 1s;
			>div{
				background-color: #ffffff;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			.login-form{
				transform: translateZ(1px);
			}
			.login-pwd{
				transform: rotateY(180deg) translateZ(1px);
			}
		}
	}
</style>